<template>
    <div class="bookList">
        <div class="bookList_box">
            <div class="category_list">
            <!-- 通过v-for循环渲染每个分类标签，并通过@click触发categoryChange方法 -->
                <span @click="categoryChange(index,$event)" :class="{'active':activeIndex == index}"
                    v-for="(category,index) in categoryList" :key="index" class="category">{{category}}</span>
            </div>
            <div class="book_box">
                <el-row>
                    <el-col :span="6" v-for="(book,index) in bookPage" :key="index" class="boox_col">
                        <div class="item">
                        <!-- 产品封面图片，点击时触发detail方法以查看产品详情 -->

                            <img :src="book.cover" @click="detail(book)" alt="图片加载出错" class="cover">
                            <div class="information">
                                <span>{{book.bookName}}</span>
                                <span>{{book.author}}</span>
                            </div>
                            <div class="information">
                                <el-tag type="success">{{book.price}}元</el-tag>
                                <!-- 带有提示信息的加入购物车按钮，点击时触发addCart方法 -->
                                <el-tooltip effect="light" content="加入购物车" placement="right">
                                    <el-button type="success" @click="addCart(book)" size="mini"
                                        icon="el-icon-shopping-cart-2"></el-button>
                                </el-tooltip>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-pagination class="pagination" :current-page="page.currentPage" :page-sizes="[8]"
                :page-size="page.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="prev, pager, next, jumper, ->, sizes, total" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex"; // 导入Vuex的mapState辅助函数

export default {
    name: 'BookList', // 组件名称为BookList
    data() {
        return {
            bookPage: [], // 存储当前页面的产品列表
            page: { // 分页信息
                currentPage: 1, // 当前页码
                pageSize: 8, // 每页显示的产品数量
                total: 0, // 总产品数量
            },
            activeIndex: 0, // 当前激活的分类索引
        }
    },
    methods: {
        getBookPage() { // 获取当前页面的产品列表
            let start = (this.page.currentPage - 1) * (this.page.pageSize);
            let end = this.page.pageSize * this.page.currentPage;
            this.bookPage = this.bookList.slice(start, end);
        },
        getTotal() { // 获取总产品数量
            this.page.total = this.bookList.length;
        },
        handleSizeChange(pageSize) { // 处理每页显示数量变化的事件
            this.page.pageSize = pageSize;
            this.getBookPage();
        },
        handleCurrentChange(currentPage) { // 处理当前页码变化的事件
            this.page.currentPage = currentPage;
            this.getBookPage();
        },
        categoryChange(index, event) { // 分类点击事件
            this.activeIndex = index;
            let type = event.target.innerHTML;
            if (type == '全部分类') {
                this.getBookPage();
                this.getTotal();
            } else {
                let newBookList = this.bookList.filter((item) => {
                    if (item.type == type) return true;
                });
                this.page.total = newBookList.length;
                this.bookPage = newBookList;
            }
        },
        detail(book) { // 产品详情
            this.$router.push('/book');
            this.$store.commit('DETAIL', book);
        },
        search(key) { // 搜索功能，这里只能从前往后搜索，不能任意关键词搜索
            this.bookPage = this.bookList.filter((item) => {
                if (item.bookName.indexOf(key) == 0) return true;
            });
            this.page.total = this.bookPage.length;
        },
        addCart(book) { // 添加产品到购物车
            this.$store.commit('ADDCART', book);
            this.$message({
                type: 'success',
                message: '添加购物车成功'
            });
        }
    },
    mounted() { // 组件挂载完成后执行的方法
        this.getBookPage();
        this.getTotal();
    },
    computed: {
        ...mapState({ // 从Vuex状态树中映射状态到计算属性
            bookList: (state) => state.bookList, // 映射产品列表
            categoryList: (state) => state.categoryList, // 映射分类列表
        }),
    },
}
</script>

<style scoped>
    .bookList {
        display: flex;
        justify-content: center;
        text-align: center;
        background: bisque;
    }

    .bookList_box {
        background: white;
    }

    .category_list {
        width: 1150px;
        height: 50px;
    }

    .category {
        font-size: 16px;
        padding: 10px 30px;
        line-height: 50px;
    }

    .category:hover {
        color: #27ae60;
        border-bottom: 2px solid #2ecc71;
        cursor: pointer;
    }

    .active {
        color: #27ae60;
        border-bottom: 2px solid #2ecc71;
    }

    .book_box {
        width: 1150px;
    }

    .boox_col {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .item {
        padding: 10px 15px;
        border: 2px #eeeeee solid;
        width: 200px;
    }

    .item:hover {
        box-shadow: 0 0 10px #ddd;
    }

    .cover {
        width: 200px;
        height: 200px;
    }

    .information {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        padding-top: 20px;
    }

    .pagination {
        text-align: center;
        padding: 30px 100px;
    }
</style>